<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax</title>
    <script type="text/javascript" async
        src="https://cdn.bootcss.com/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
        </script>
    <script>
        var jsonList = JSON_TO_REPLACE;
        var index = 0;

        function showAnswer() {
            document.getElementById('formula_right').style.display = 'block';
        }

        function showFormula() {
            var length = jsonList.length;

            if (index < length) {
                var formula = jsonList[index];
                document.getElementById('formula').innerText = "$$" + formula.left + "=$$";
                document.getElementById('formula_right').innerText =  "$$" + formula.right + "$$";
                document.getElementById('formula_right').style.display = "none";
                MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
            } else {
                document.getElementById('formula').innerHTML = "OVER";
                document.getElementById('formula_right').innerHTML = "";
            }
            index++;
            document.getElementById('next').innerText = "下个公式";
        }
    </script>
</head>

<body>
    <p>
        <label> TITLE_TO_REPLACE </label>
    </p>


    <p>
        <button id="next" onclick="showFormula()">开始答题</button>
    </p>

    <p>
        <button onclick="showAnswer()">显示答案</button>
    </p>

    <p id="formula" onclick="showFormula()">

    </p>

    <p id="formula_right" style="display:none">

    </p>

    <script>

    </script>
</body>

</html>